<template>
  <div>
    <FilterTable
      ref="table"
      :columns="columns"
      height="auto"
      :dataSource="changeList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => this.columns = columns"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
    </div>
    <Drawer
      :visible.sync="visibleDetail"
      title="潜客明细"
      width="80%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <Detail ref="Detail" :type="handleType" :rowData="formDataDetail" @close="closeHandler"/>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'center'
        }"
      >
        <el-button @click="closeDialog">返 回</el-button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { queryChangeList } from '@/api/potenCus/customer/potenCusManage';
import { dictionary } from '@/utils/dictMixin';
import Detail from './detail';
import { formatDates } from '@/utils/validate';

export default {
  name: 'changeHistory',
  mixins: [dictionary],
  components: {
    Detail,
  },
  props: {
    type: {
      type: String,
      default: 'show'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      changeList: [],
      columns: this.createTableColumns(),
      handleType: '',
      formData: {},
      formDataDetail: {},
      visibleDetail: false
    };
  },
  created() {
    this.init();
    this.getAboutCluesList()
  },
  methods: {
    init() {
      if (this.type === 'edit' || this.type === 'show') {
        // 更新接口需要的记录 ID
        // console.log('变更', this.rowData)
        this.recordId = this.rowData.customerBusinessId;
        this.ownerCode = this.rowData.ownerCode;
      }
    },
    selectChangeHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '发生时间',
          dataIndex: 'changeDate',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.changeDate) } </span>
          }
        },
        {
          title: '操作人员',
          dataIndex: 'personnelName',
          filterType: 'input'
        },
        {
          title: '发生事项',
          dataIndex: 'changeMatter',
          filterType: 'checkbox',
          filterItems: this.createDictList('7045'),
          render: props => {
            return <span>{this.createDictText(props.row.changeMatter, '7045')}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'remark',
          filterType: 'input',
          minWidth: 350,
          render: props => {
            console.log('备注' ,props.row)
            if(props.row.combineClueListDTO){
              let list = props.row.combineClueListDTO
              let name = []
              let mainName = ''
              list.forEach(item =>{
                if(item.isMainClue !=10041001){
                  name.push(<span class="styleName" onClick={() => this.clickHandle(item)}>{item.customerBusinessName}&nbsp;</span>)
                }
                if(item.isMainClue === 10041001){
                  mainName = item.customerBusinessName
                }
              })
              console.log('combineClueListDTO', name, mainName )
              return <span>潜客 {name} 合并入 {mainName}</span>;
            } else {
              return <span>{props.row.remark}</span>;
            }
          }

        }
      ];
    },
    clickHandle(item){
      console.log(item)
      this.formDataDetail = item
      this.visibleDetail = true
    },
    async getAboutCluesList() {
      const res = await queryChangeList(this.recordId, this.ownerCode)
      // const res = await queryChangeList(632)
      console.log('变更', res)
      if (res.resultCode === 200) {
        this.changeList = res.data;
      }
    },
    closeHandler(val, type) {
      this.formDataDetail = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeDialog(){
      this.visibleDetail = false
    },

  }
};
</script>

<style lang="less" scoped>
.styleName{
  // text-decoration:underline;
  color: blue;
  cursor: pointer;
}
</style>

